<template>
<div class="item-one" ref="itemOne">
    <div class="title">
      <span>广告管理</span>
      <div>
        <el-button type="primary" @click="vis = true">广告发布</el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem">
              <el-input class="merchants1" placeholder="服务商名称" v-model.trim="service_id"></el-input>
          </div>
          <div class="leftitem">
            <el-select class="servicelevel" placeholder="广告类型" v-model="AD_type">
                <!-- <el-option keys="1" label="自定义链接" value="1"></el-option> -->
                <el-option keys="2" label="外部链接" value="2"></el-option>
                <el-option keys="2" label="多媒体广告" value="3"></el-option>
              <!-- <el-option v-for="(item,index) in inventoryCategoryListlev" :key="index" :label="item.name" :value="item.id"></el-option> -->
            </el-select>
            <el-select class="servicelevel" placeholder="广告状态" v-model="AD_state">
                <!-- <el-option keys="1" label="待审核" value="1"></el-option>
                <el-option keys="2" label="审核驳回" value="2"></el-option> -->
                <el-option keys="3" label="待生效" value="3"></el-option>
                <el-option keys="4" label="已暂停" value="4"></el-option>
                <el-option keys="5" label="生效中" value="5"></el-option>
                <el-option keys="6" label="已结束" value="6"></el-option>
              <!-- <el-option v-for="(item,index) in inventoryCategoryType" :key="index" :label="item.name" :value="item.id"></el-option> -->
            </el-select>
          </div>
          <div class="leftitem">
            <el-select class="servicelevel" placeholder="支付类型" v-model="pay_type">
                <!-- <el-option keys="1" label="会员卡交易" value="100"></el-option>
                <el-option keys="2" label="银行卡刷卡" value="200"></el-option> -->
                <el-option keys="3" label="支付宝" value="300"></el-option>
                <el-option keys="4" label="微信" value="400"></el-option>
                <el-option keys="6" label="云闪付" value="600"></el-option>
            </el-select>
            <el-input class="merchants" placeholder="素材编号" v-model.trim="material_num"></el-input>
            <!-- <el-select class="servicelevel" placeholder="投放环境" v-model="put_environment">
                <el-option keys="0" label="绑定" value="0"></el-option>
            </el-select> -->
          </div>
          <div class="leftitem">
            <!-- <el-select class="servicelevel" placeholder="重复类型" v-model="repeat_type">
                <el-option keys="0" label="绑定" value="0"></el-option>
                <el-option keys="1" label="出库" value="1"></el-option>
                <el-option keys="2" label="入库" value="2"></el-option>
            </el-select> -->
            <el-input class="merchants1" placeholder="商户名称" v-model.trim="merchants_id"></el-input>
          </div>
          <!-- <div class="leftitem">
              
          </div> -->
        </div>
        <div class="rightBox">
          <div class="rightitem">
              <el-input class="merchants1" placeholder="广告标题" v-model.trim="AD_title"></el-input>
          </div>
          <div class="rightitem">
            <div class="block">
              <el-date-picker
                v-model="date"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </div>
          </div>
          <div class="rightitem">
            <el-select class="servicelevel" placeholder="所在省" v-model="province" @change="changeCity">
                <el-option
                v-for="(item, index) in provincearr"
                :key="index"
                :label="item.name"
                :value="item.id"
                :codeid="item.code"
                ></el-option>
            </el-select>
            <el-select class="servicelevel" placeholder="所在市" v-model="city">
                <el-option
                v-for="(value, index) in citysarr"
                :key="index"
                :label="value.name"
                :value="value.id"
                ></el-option>
            </el-select>
          </div>
          <div class="rightitem">
            <!-- <el-input class="merchants1" placeholder="标签名称" v-model="tag_name"></el-input> -->
            <el-autocomplete class="merchants1" v-model.trim="tag_name" :fetch-suggestions="querySearch_tag" @select="serviceid_tag" placeholder="标签名称" :trigger-on-focus="false"></el-autocomplete>
          </div>
          <div class="rightitem">
          </div>
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso">搜索</el-button>
            <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </div>

      <div class="tableBox">
        <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          :data="tableData"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column prop="title" align="center" label="广告标题"></el-table-column>
          <el-table-column prop="startTime" align="center" label="开始时间"></el-table-column>
          <el-table-column prop="endTime" align="center" label="结束时间"></el-table-column>
          <el-table-column prop="materialNo" align="center" label="素材编号"></el-table-column>
          <el-table-column prop="materialTypeName" align="center" label="素材类型"></el-table-column>
          <el-table-column prop="total" align="center" label="投放总数"></el-table-column>
          <el-table-column prop="left" align="center" label="剩余总数"></el-table-column>
          <el-table-column prop="hits" align="center" label="点击量"></el-table-column>
          <!-- <el-table-column prop="deviceHolder" align="center" label="重复类型"></el-table-column> -->
          <el-table-column prop="type" align="center" label="广告类型">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">自定义链接</span>
              <span v-if="scope.row.type == 2">外部链接</span>
              <span v-if="scope.row.type == 3">多媒体</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="广告链接">
            <template slot-scope="scope">
              <a class="a_link" :href="scope.row.materialUrl" type="success" target="_Blank">预览</a>
            </template>
          </el-table-column>
          <el-table-column prop="weight" align="center" label="曝光权重"></el-table-column>
          <el-table-column prop="status" align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 3" style="color:#ff9800">待生效</span>
              <span v-if="scope.row.status == 4" style="color:#3F51B5">已暂停</span>
              <span v-if="scope.row.status == 5" style="color:#259B24">生效中</span>
              <span v-if="scope.row.status == 6" style="color:#101010">已结束</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="edit_ad(scope.row.id)">详情</el-button>
              <el-button type="text" @click="pause_ad(scope.row.id)" v-if="scope.row.status == 5">暂停</el-button>
              <el-button type="text" @click="start_ad(scope.row.id)" v-if="scope.row.status == 4">上架</el-button>
              <el-button type="text" @click="delete_ad(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-sizes="[10,20,30,40,50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
            :current-page.sync="cur_page"
          ></el-pagination>
        </div>
      </div>
      <br>
      <br>
      <!-- 发布广告-->
      <el-dialog v-dialogDrag title="发布广告" :visible.sync="vis" width="50%" :close-on-click-modal="false">
        <el-form
          status-icon
          ref="facility"
          label-width="230px"
          class="demo-dynamic wid80"
        >
          <el-form-item label="广告标题：">
            <el-input type="text" placeholder="请输入广告标题" autocomplete="off" v-model.trim="add_adTitle"></el-input>
          </el-form-item>
          <el-form-item label="广告类型：">
            <el-select class="wid100" placeholder="请选择" v-model="add_adType" @change="addType">
              <!-- <el-option keys="1" label="自定义链接" value="1"></el-option> -->
              <el-option keys="2" label="外部链接" value="2"></el-option>
              <el-option keys="2" label="多媒体广告" value="3"></el-option>
              <!-- <el-option keys="3" label="自定义图片" value="3"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="投放素材：">
            <el-autocomplete class="wid100" v-model.trim="add_adMaterial" :fetch-suggestions="querySearch_sc" @select="serviceid_sc" placeholder="请输入素材名称" :trigger-on-focus="false"></el-autocomplete>
          </el-form-item>
          <el-form-item v-if="add_adType != 3" label="投放总量：">
            <el-input type="text" placeholder="请输入投放总量" :maxlength='9' autocomplete="off" v-model.trim="add_adNum" :oninput = "add_adNum=add_adNum.replace(/[^\d{1,}\d{1,}|\d{1,}]/g,'')"></el-input>
          </el-form-item>
          <el-form-item label="曝光权重：">
            <el-select class="wid100" placeholder="请选择" v-model="add_adWeights">
              <el-option keys="1" label="1" value="1"></el-option>
              <el-option keys="2" label="2" value="2"></el-option>
              <el-option keys="3" label="3" value="3"></el-option>
              <el-option keys="4" label="4" value="4"></el-option>
              <el-option keys="5" label="5" value="5"></el-option>
              <el-option keys="6" label="6" value="6"></el-option>
              <el-option keys="7" label="7" value="7"></el-option>
              <el-option keys="8" label="8" value="8"></el-option>
              <el-option keys="9" label="9" value="9"></el-option>
              <el-option keys="10" label="10" value="10"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投放时间：">
            <div class="block">
              <el-date-picker
                class="wid100"
                v-model="add_date"
                :clearable='false'
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="是否重复投放(针对用户)：">
            <el-select class="wid100" placeholder="请选择" v-model="add_adRepeat">
              <el-option keys="0" label="重复投放" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="add_adType != 3" label="投放区域：">
            <el-radio v-model="add_area" :label="1">默认（全部地区）</el-radio>
            <el-radio v-model="add_area" :label="2">自定义</el-radio>
          </el-form-item>
          <el-form-item label="省市：" v-if="add_area == 2">
            <el-select class="wid50" placeholder="请选择" v-model="add_province" @change="add_changeCity">
              <el-option
              v-for="(item, index) in provincearr"
              :key="index"
              :label="item.name"
              :value="item.id"
              :codeid="item.code"
              ></el-option>
            </el-select>
            <el-select class="wid50" placeholder="请选择" v-model="add_city">
              <el-option
              v-for="(value, index) in add_citysarr"
              :key="index"
              :label="value.name"
              :value="value.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="add_adType != 3" label="支付方式：">
            <el-checkbox-group v-model="add_pay">
              <el-checkbox :label="300">支付宝</el-checkbox>
              <el-checkbox :label="400">微信</el-checkbox>
              <el-checkbox :label="600">云闪付</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否指定流向：">
            <el-radio-group v-model="add_whFrom"  :disabled='whfroms' @change="isyesorno1">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="指定流向：" v-if="add_whFrom == 1">
            <el-select class="wid1001" placeholder="请选择" v-model="add_from">
              <el-option keys="1" label="服务商" :value="1"></el-option>
              <el-option keys="2" label="商户" :value="2"></el-option>
            </el-select>
            <el-autocomplete class="wid100" v-if="add_from == 1" v-model.trim="agentname" :fetch-suggestions="querySearch_fws" @select="serviceid_fws" placeholder="请输入服务商名称"></el-autocomplete>
            <el-autocomplete class="wid100" v-if="add_from == 2" v-model.trim="merchantname" :fetch-suggestions="querySearch_sh" @select="serviceid_sh" placeholder="请输入商户名称" :trigger-on-focus="false"></el-autocomplete>
          </el-form-item>
          <!-- <el-form-item label="标签(针对广告来源)：">
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-button class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
          </el-form-item> -->
        </el-form>
        <!-- <el-dialog v-dialogDrag title="添加标签" :visible.sync="inputVisible" width="35%" append-to-body :close-on-click-modal="false">
          <el-transfer 
          :data="unUsedTags"
          :titles="['未选标签', '已选择标签']" 
          filterable
          filter-placeholder="请输入关键词"
          >
          </el-transfer>
          <div style="width:100%;text-align:right;margin-top:30px;">
            <el-button type="primary" @click="inputVisible = false">取消</el-button>
            <el-button type="primary">确定</el-button>
          </div>
        </el-dialog> -->
        <el-dialog v-dialogDrag title="素材预览" :visible.sync="add_imgshow" width="35%" append-to-body :close-on-click-modal="false">
          <img v-if="add_type != 4" class="imgurl" :src="add_imgurl" alt="">
          <!-- <video v-if="add_type == 4" class="imgurl" :src="add_imgurl"> -->
            <video v-if="add_type == 4"  :src="add_imgurl" controls="imgurl">
            您的浏览器不支持 video 标签。
            </video>
          <div style="width:100%;text-align:right;margin-top:30px;">
            <el-button type="primary" @click="add_imgshow = false">取消</el-button>
            <el-button type="primary" @click="add_imgshow = false">确定</el-button>
          </div>
        </el-dialog>
        <span slot="footer" class="dialog-footer">
          <el-button @click="vis = false">取消</el-button>
          <el-button type="primary" @click="add_ad">确定</el-button>
        </span>
      </el-dialog>
      
      <!-- 编辑广告-->
      <el-dialog v-dialogDrag title="编辑广告" :visible.sync="visbj" width="50%" :close-on-click-modal="false">
        <el-form
          status-icon
          ref="facility"
          label-width="230px"
          class="demo-dynamic wid80"
        >
          <el-form-item label="广告标题：">
            <el-input type="text" placeholder="请输入广告标题" autocomplete="off" v-model.trim="edit_adTitle"></el-input>
          </el-form-item>
          <el-form-item label="广告类型：">
            <el-select class="wid100" placeholder="请选择" v-model="edit_adType" @change="addType">
              <!-- <el-option keys="1" label="自定义链接" :value="1"></el-option> -->
              <el-option keys="2" label="外部链接" :value="2"></el-option>
              <el-option keys="2" label="多媒体广告" :value="3"></el-option>
              <!-- <el-option keys="3" label="自定义图片" value="3"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="投放素材：">
            <el-autocomplete class="wid100" v-model.trim="edit_adMaterial" :fetch-suggestions="querySearch_scBJ" @select="serviceid_scBJ" placeholder="请输入素材名称" :trigger-on-focus="false"></el-autocomplete>
          </el-form-item>
          <el-form-item v-if="edit_adType != 3" label="投放总量：">
            <el-input type="text" placeholder="请输入投放总量" :disabled="true" autocomplete="off" v-model="edit_adNum" :oninput = "add_adNum=add_adNum.replace(/[^\d{1,}\d{1,}|\d{1,}]/g,'')"></el-input>
            <el-input type="text" class="wid50_c" :maxlength='9' placeholder="请输入数量" autocomplete="off" v-model.trim="edit_appendNo" :oninput = "edit_appendNo=edit_appendNo.replace(/[^\d{1,}\d{1,}|\d{1,}]/g,'')"></el-input>
            <el-button class="pos" @click="Append">+ 追加</el-button>
          </el-form-item>
          <el-form-item label="曝光权重：">
            <el-select class="wid100" placeholder="请选择" v-model="edit_adWeights">
              <el-option keys="1" label="1" :value="1"></el-option>
              <el-option keys="2" label="2" :value="2"></el-option>
              <el-option keys="3" label="3" :value="3"></el-option>
              <el-option keys="4" label="4" :value="4"></el-option>
              <el-option keys="5" label="5" :value="5"></el-option>
              <el-option keys="6" label="6" :value="6"></el-option>
              <el-option keys="7" label="7" :value="7"></el-option>
              <el-option keys="8" label="8" :value="8"></el-option>
              <el-option keys="9" label="9" :value="9"></el-option>
              <el-option keys="10" label="10" :value="10"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投放时间：">
            <div class="block">
              <el-date-picker
                class="wid100"
                v-model="edit_date"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="是否重复投放(针对用户)：">
            <el-select class="wid100" placeholder="请选择" v-model="edit_adRepeat">
              <el-option keys="0" label="重复投放" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="edit_adType != 3" label="投放区域：">
            <el-radio v-model="edit_area" :label="1">默认（全部地区）</el-radio>
            <el-radio v-model="edit_area" :label="2">自定义</el-radio>
          </el-form-item>
          <el-form-item label="省市：" v-if="edit_area == 2">
            <el-select class="wid50" placeholder="请选择" v-model="edit_province" @change="edit_changeCity">
              <el-option
              v-for="(item, index) in provincearr"
              :key="index"
              :label="item.name"
              :value="item.id"
              :codeid="item.code"
              ></el-option>
            </el-select>
            <el-select class="wid50" placeholder="请选择" v-model="edit_city">
              <el-option
              v-for="(value, index) in edit_citysarr"
              :key="index"
              :label="value.name"
              :value="value.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="edit_adType != 3" label="支付方式：">
            <el-checkbox-group v-model="edit_pay">
              <el-checkbox label="300">支付宝</el-checkbox>
              <el-checkbox label="400">微信</el-checkbox>
              <el-checkbox label="600">云闪付</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否指定流向：">
            <el-radio-group v-model="edit_whFrom"  :disabled='whfroms' @change="isyesorno">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="指定流向：" v-if="edit_whFrom == 1">
            <el-select class="wid1001" placeholder="请选择" v-model="edit_from">
              <el-option keys="1" label="服务商" :value="1"></el-option>
              <el-option keys="2" label="商户" :value="2"></el-option>
            </el-select>
            <el-autocomplete class="wid100" v-if="edit_from == 1" v-model.trim="agentname_edit" :fetch-suggestions="querySearch_fwsBJ" @select="serviceid_fwsBJ" placeholder="请输入服务商名称" :trigger-on-focus="false"></el-autocomplete>
            <el-autocomplete class="wid100" v-if="edit_from == 2" v-model.trim="merchantname_edit" :fetch-suggestions="querySearch_shBJ" @select="serviceid_shBJ" placeholder="请输入商户名称" :trigger-on-focus="false"></el-autocomplete>
          </el-form-item>
          <el-form-item label="标签(针对广告来源)：">
            <!-- <el-tag
              :key="item.id"
              v-for="item in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(item.tag)">
              {{item.tag}}
            </el-tag> -->
            <el-tag
                v-for="item in dynamicTags"
                :key="item.tagId"
                effect="plain">
                {{ item.tagName }}
            </el-tag>
            <el-button class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
          </el-form-item>
        </el-form>
        <el-dialog v-dialogDrag title="添加标签" :visible.sync="inputVisible" width="35%" append-to-body :close-on-click-modal="false">
          <el-transfer 
          v-model="usedTags" 
          :data="unUsedTags"
          :titles="['未选标签', '已选择标签']" 
          filterable
          filter-placeholder="请输入关键词"
          >
          </el-transfer>
          <div style="width:100%;text-align:right;margin-top:30px;">
            <el-button type="primary" @click="inputVisible = false">取消</el-button>
            <el-button type="primary" @click="add_tag">确定</el-button>
          </div>
        </el-dialog>
        <el-dialog v-dialogDrag title="素材预览" :visible.sync="edit_imgshow" width="35%" append-to-body :close-on-click-modal="false">
          {{edit_adType}}
          <img v-if="edit_adType != 3" class="imgurl" :src="edit_imgurl" alt="">
          <video v-if="edit_adType == 3"  :src="edit_imgurl" controls="imgurl">
            您的浏览器不支持 video 标签。
            </video>
          <div style="width:100%;text-align:right;margin-top:30px;">
            <el-button type="primary" @click="edit_imgshow = false">取消</el-button>
            <el-button type="primary" @click="edit_imgshow = false">确定</el-button>
          </div>
        </el-dialog>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visbj = false">取消</el-button>
          <el-button type="primary" @click="edit_sub">确定</el-button>
        </span>
      </el-dialog>
    </div>
</div>
</template>

<script>
import {province, city, agent, merchantlist, getAdMaterialPage, postAdInfoSave, getAdInfoPage, getAdInfoEdit, postAdInfoUpdate, postAdInfoSuspend, postAdInfoDelete, getSelectTagsByRole, postAdInfoStart, getDimensionTagList} from "@/api/api";
export default {
    name: 'markdown',
    data: function(){
        return {
            service_id:'',//服务商名称/编号
            AD_type:'',//广告类型
            AD_state:'',//广告状态
            pay_type:'',//支付类型
            put_environment:'',//投放环境
            repeat_type:'',//重复类型
            material_num:'',//素材编号
            merchants_id:'',//商户名称/商户   
            AD_title:'',//广告标题
            date:[],//时间
            province:'',//所在省
            city:'',//所在市
            provincearr:[],//所有省
            citysarr:[],//所有市
            tag_name:'',//标签名称
            tag_Id:'',
            label_all:[],
            tableData:[],//列表数据
            combined:0,//列表总条数
            cur_page: 1,
            cur_size: 10,
            vis:false,
            whfroms: false,//是否指定流向是否禁用值
            //新增弹框
            add_adTitle:'',//广告标题
            add_adType:'',//广告类型
            add_adMaterial:'',//投放素材
            add_adMaterialId:'',//投放素材模糊ID
            add_adMaterialList:[],
            add_adNum:'',//投放总量
            add_adWeights:'',//曝光权重
            add_date:[],//投放时间
            add_adRepeat:'',//是否重复
            add_area:1,//选择投放区域
            add_province:'',//省
            add_city:'',//市
            add_citysarr:[],//所有市数据
            add_pay:[],//支付方式
            add_whFrom:0,//是否指定流向
            add_from:'',//指定的流向
            agentname:'',//服务商模糊查询
            agent_id:'',
            agenList:[],
            merchantname:'',//商户名称模糊
            merchant_id:'',
            merchantList:[],
            add_imgurl:'',//素材预览
            add_imgshow:false,
            add_type: '',
            materialType: '',//素材类型

            unUsedTags:[],
            usedTags:[],

            dynamicTags: [],
            inputVisible: false,
            inputValue: '',

            //编辑广告
            visbj: false,
            edit_adTitle:'',//广告标题
            edit_adType:'',//广告类型
            edit_adMaterial:'',//投放素材
            edit_adMaterialId:'',//投放素材模糊ID
            edit_adMaterialList:[],
            edit_adNum:'',//投放总量
            edit_appendNo: '',
            edit_adWeights:'',//曝光权重
            edit_date:[],//投放时间
            edit_adRepeat:'',//是否重复
            edit_area:1,//选择投放区域
            edit_province:'',//省
            edit_city:'',//市
            edit_citysarr:[],//所有市数据
            edit_pay:[],//支付方式
            edit_whFrom:'',//是否指定流向
            edit_from:'',//指定的流向
            agentname_edit:'',//服务商模糊查询
            agent_editid:'',
            agenList_edit:[],
            merchantname_edit:'',//商户名称模糊
            merchant_editid:'',
            merchantList_edit:[],
            edit_imgurl:'',//素材预览
            edit_imgshow:false,
            edit_id:'',
        }
    },
    created(){
      this.getAdInfoPage()
      this.province1()
    },
    methods:{
        //修改thead 背景色
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
            }
        },
        // 分页导航
        handleCurrentChange(val) {
            this.cur_page = val;
            this.getAdInfoPage()
        },
        // 分页数量
        sizechange(val) {
            this.cur_size = val;
            this.getAdInfoPage()
        },

        // handleClose(tag) {
        //   this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        // },
        showInput() {
          this.inputVisible = true;
        },

        handleInputConfirm() {
          let inputValue = this.inputValue;
          if (inputValue) {
            this.dynamicTags.push(inputValue);
          }
          this.inputVisible = false;
          this.inputValue = '';
        },
        // 搜索
        soso() {
          this.cur_page = 1
          this.getAdInfoPage()
        },
        //  重置
        reset() {
          this.service_id = ''
          this.merchants_id = ''
          this.AD_title = ''
          this.AD_type = ''
          this.AD_state = ''
          this.province = ''
          this.city = ''
          this.date = []
          this.material_num = ''
          this.pay_type = ''
          this.tag_name = ''
          this.tag_Id = ''
        },
        //获取列表数据
        getAdInfoPage(){
          console.log(this.date)
          if(this.date == null){
            this.date = [] //控件清空时间会导致报错
          }
          getAdInfoPage({
            agentName: this.service_id,
            merchantName: this.merchants_id,
            title: this.AD_title,
            type: this.AD_type,
            status: this.AD_state,
            provinceId: this.province,
            cityId: this.city,
            sTime: this.date[0],
            eTime: this.date[1],
            materialNo: this.material_num,
            payType: this.pay_type,
            tagId: this.tag_Id,
            page: this.cur_page,
            size: this.cur_size
          }).then(res => {
            if(res.code ==405){
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            }else if (res.code == 200) {
              this.tableData = res.data
              this.combined = res.pageInfo.recordCount
            }else if(res.code == 500){
              this.$message.error(res.message);
            }
          })
        },
         //获取省
        province1() {
          province().then(res => {
            console.log(res);
            this.provincearr = res.data;
          });
        },
        //获取市code
        citys(val,n) {
          let obj = {};
          obj = this.provincearr.find(item => {
            //这里的userList就是上面遍历的数据源
            return item.id === val; //筛选出匹配数据
          });
          // this.citysarr = [];
          // this.add_citysarr = []
          city({
            provinceId: val
          }).then(res => {
            if(n == 1){
              this.citysarr = res.data
            }else if(n == 2){
              this.add_citysarr = res.data
            }else if(n == 3){
              this.edit_citysarr = res.data
            }
          });
        },
        //外层搜索 获取市
        changeCity(val){
          this.citys(val,1)
          this.city = ''
        },
        //新增广告弹框 获取市
        add_changeCity(val){
          this.citys(val,2)
          this.add_city = ''
        },
        //编辑广告弹框 获取市
        edit_changeCity(val){
          this.citys(val,3)
          this.edit_city = ''
        },
        createFilter(queryString) {
          return restaurant => {
            return (
              restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
              -1
            );
          };
        },
        //服务商模糊
        querySearch_fws(queryString,cb){
          let that = this
          agent({
            page: 1,
            size: 20,
            keywords: this.agentname
          }).then(res => {
            if(res.code == 405){
              sessionStorage. removeItem('token')
              that.$router.push('/login');
            }else if(res.code == 200){
              that.agenList = []
              for(var i=0;i<res.data.length;i++){
                that.agenList.push({'value':res.data[i].agentname,'id':res.data[i].id})
              }
              let servicearr = that.agenList;
              let results = queryString
                ? servicearr.filter(that.createFilter(queryString))
                : servicearr;
              // 调用 callback 返回建议列表的数据
              cb(results);
            }else{
              that.$message.error(res.message);
            }
          })
        },
        serviceid_fws(item){
          this.agent_id = item.id
          this.merchant_id = ''
          this.merchantname = ''
        },
        //商户模糊查询
        querySearch_sh(queryString,cb){
          let that = this
          merchantlist({
            page: 1,
            size: 20,
            merchantName: this.merchantname
          }).then(res => {
            if(res.code == 405){
              sessionStorage. removeItem('token')
              that.$router.push('/login');
            }else if(res.code == 200){
              that.merchantList = []
              console.log(res)
              for(var i=0;i<res.data.length;i++){
                that.merchantList.push({'value':res.data[i].merchantName,'id':res.data[i].id})
              }
              let servicearr = that.merchantList;
              let results = queryString
                ? servicearr.filter(that.createFilter(queryString))
                : servicearr;
              // 调用 callback 返回建议列表的数据
              cb(results);
            }else{
              that.$message.error(res.message);
            }
          })
        },
        serviceid_sh(item){
          this.merchant_id = item.id
          this.agent_id = ''
          this.agentname = ''
        },
        //素材模糊查询
        querySearch_sc(queryString,cb){
          let that = this
           if(this.add_adType == 3){
             getAdMaterialPage({
            page: 1,
            size: 20,
            isMedia: 1,
            name: this.add_adMaterial
          }).then(res => {
            if(res.code == 405){
              sessionStorage. removeItem('token')
              that.$router.push('/login');
            }else if(res.code == 200){
              that.add_adMaterialList = []
              console.log(res)
              for(var i=0;i<res.data.length;i++){
                that.add_adMaterialList.push({'value':res.data[i].name,'id':res.data[i].id,"url":res.data[i].url,'type':res.data[i].type})
              }
              let servicearr = that.add_adMaterialList;
              let results = queryString
                ? servicearr.filter(that.createFilter(queryString))
                : servicearr;
              // 调用 callback 返回建议列表的数据
              cb(results);
            }else{
              that.$message.error(res.message);
            }
          })
          }else{
            getAdMaterialPage({
            page: 1,
            size: 20,
            isMedia: 0,
            name: this.add_adMaterial
          }).then(res => {
            if(res.code == 405){
              sessionStorage. removeItem('token')
              that.$router.push('/login');
            }else if(res.code == 200){
              that.add_adMaterialList = []
              console.log(res)
              for(var i=0;i<res.data.length;i++){
                that.add_adMaterialList.push({'value':res.data[i].name,'id':res.data[i].id,"url":res.data[i].url,'type':res.data[i].type})
              }
              let servicearr = that.add_adMaterialList;
              let results = queryString
                ? servicearr.filter(that.createFilter(queryString))
                : servicearr;
              // 调用 callback 返回建议列表的数据
              cb(results);
            }else{
              that.$message.error(res.message);
            }
          })
          }
         
        },
        serviceid_sc(item){
          this.add_adMaterialId = item.id
          this.materialType = item.type
          //素材预览 筛选对应的URL
          for(var i=0;i<this.add_adMaterialList.length;i++){
            if(item.id == this.add_adMaterialList[i].id && this.add_adMaterialList[i].type !== 2){
              this.add_imgurl = this.add_adMaterialList[i].url
              this.add_type = this.add_adMaterialList[i].type
              this.add_imgshow = true
            }else if(item.id == this.add_adMaterialList[i].id && this.add_adMaterialList[i].type == 2){
              this.add_imgurl = this.add_adMaterialList[i].url
               this.add_type = this.add_adMaterialList[i].type
            }
          }
          console.log(this.add_imgurl)
        },
        //标签模糊
        querySearch_tag(queryString,cb){
          let that = this
          getDimensionTagList({
            roleId: 88,
            tagwords: this.tag_name
          }).then(res => {
            if(res.code == 405){
              sessionStorage. removeItem('token')
              that.$router.push('/login');
            }else if(res.code == 200){
              that.label_all = []
              for(var i=0;i<res.data.length;i++){
                that.label_all.push({'value':res.data[i].tagName,'id':res.data[i].tagId})
              }
              let servicearr = that.label_all;
              let results = queryString
                ? servicearr.filter(that.createFilter(queryString))
                : servicearr;
              // 调用 callback 返回建议列表的数据
              cb(results);
            }else{
              that.$message.error(res.message);
            }
          })
        },
        serviceid_tag(item){
          console.log(item)
          this.tag_Id = item.id
        },
        //添加弹框单选框
        isyesorno1(){
          if(this.add_whFrom == 0){
            this.add_from = ''
            this.agentname = ''
            this.agent_id = ''
            this.merchantname = ''
            this.merchant_id = ''
          }
        },
        //添加广告
        add_ad(){
          var fids = ''
          if(this.agent_id && this.merchant_id == ''){
            fids = this.agent_id
          }else if(this.merchant_id && this.agent_id == ''){
            fids = this.merchant_id
          }
          var payType = this.add_pay.join(',')
          if(this.add_area == 1){
            this.add_province = ''
            this.add_city = ''
          }
          var add_from = ''
          if(this.add_whFrom == 0){
            add_from = 0
            this.add_from = ''
            this.agentname = ''
            this.agent_id = ''
            this.merchantname = ''
            this.merchant_id = ''
          }else{
            add_from = this.add_from
          }
          if(this.add_date == null){
            this.$message.error('投放时间不能为空')
            return false
          }
          postAdInfoSave({
            title: this.add_adTitle,
            type: this.add_adType,
            materialId: this.add_adMaterialId,
            materialUrl: this.add_imgurl,
            total: this.add_adNum,
            weight: this.add_adWeights,
            startTime: this.add_date[0],
            endTime: this.add_date[1],
            provinceId: this.add_province,
            cityId: this.add_city,
            payType: payType,
            environment: add_from,
            fids: fids,
            materialType: this.materialType
          }).then(res => {
            if(res.code ==405){
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            }else if (res.code == 200) {
              this.vis = false
              this.getAdInfoPage()
              this.add_adTitle = ''
              this.add_adType = ''
              this.add_adMaterialId = ''
              this.add_imgurl = ''
              this.add_adMaterial = ''
              this.add_adNum = ''
              this.add_adWeights = ''
              this.add_date = []
              this.add_province = ''
              this.add_city = ''
              this.add_area = 1
              this.add_pay = []
              this.add_whFrom = 0
              this.agent_id = ''
              this.merchant_id = ''
              this.merchantname = ''
              this.agentname = ''
              this.$message({
                message: res.message,
                type: "success"
              });
            }else if(res.code == 500){
              this.$message.error(res.message);
            }
          })
        },
        //显示添加标签弹框
        popuptag(v){
          this.usedTags = []
          //获取指定对象可添加标签
          getSelectTagsByRole({
            fid: v,
            roleId: 88
          }).then(res => {
            if (res.code == 405) {
                sessionStorage.removeItem("token");
                this.$router.push("/login");
            } else if(res.code == 200){
              if(this.unUsedTags.length == 0){
                for(var i = 0; i < res.data.allTags.length; i++){
                  this.unUsedTags.push({key:res.data.allTags[i].id,label:res.data.allTags[i].name})
                }
              } 
              if(this.usedTags.length == 0){
                for(var i = 0; i < res.data.usedTags.length;i++){
                  this.usedTags.push(res.data.usedTags[i].id)
                }
              }
            }else if(res.code == 500){
                this.$message.error(res.message);   
            }
          })
        },
        add_tag(){
          this.dynamicTags = []
          for(var i = 0;i < this.unUsedTags.length; i++){
            for(var j = 0;j < this.usedTags.length; j++){
              if(this.usedTags[j] == this.unUsedTags[i].key){
               this.dynamicTags.push({"tagId": this.unUsedTags[i].key,"tagName":this.unUsedTags[i].label});
              }
            }
          }
          this.inputVisible = false
        },
        //编辑弹框 服务商模糊
        querySearch_fwsBJ(queryString,cb){
          let that = this
          agent({
            page: 1,
            size: 20,
            keywords: this.agentname_edit
          }).then(res => {
            if(res.code == 405){
              sessionStorage. removeItem('token')
              that.$router.push('/login');
            }else if(res.code == 200){
              that.agenList_edit = []
              for(var i=0;i<res.data.length;i++){
                that.agenList_edit.push({'value':res.data[i].agentname,'id':res.data[i].id})
              }
              let servicearr = that.agenList_edit;
              let results = queryString
                ? servicearr.filter(that.createFilter(queryString))
                : servicearr;
              // 调用 callback 返回建议列表的数据
              cb(results);
            }else{
              that.$message.error(res.message);
            }
          })
        },
        serviceid_fwsBJ(item){
          this.agent_editid = item.id
          this.merchant_editid = ''
          this.merchantname_edit = ''
        },
        //编辑 商户模糊
        querySearch_shBJ(queryString,cb){
          let that = this
          merchantlist({
            page: 1,
            size: 20,
            merchantName: this.merchantname_edit
          }).then(res => {
            if(res.code == 405){
              sessionStorage. removeItem('token')
              that.$router.push('/login');
            }else if(res.code == 200){
              that.merchantList_edit = []
              console.log(res)
              for(var i=0;i<res.data.length;i++){
                that.merchantList_edit.push({'value':res.data[i].merchantName,'id':res.data[i].id})
              }
              let servicearr = that.merchantList_edit;
              let results = queryString
                ? servicearr.filter(that.createFilter(queryString))
                : servicearr;
              // 调用 callback 返回建议列表的数据
              cb(results);
            }else{
              that.$message.error(res.message);
            }
           })
        },
        serviceid_shBJ(item){
          this.merchant_editid = item.id
          this.agent_editid = ''
          this.agentname_edit = ''
        },
        //编辑弹框 素材模糊查询
        querySearch_scBJ(queryString,cb){
           let that = this
          if(this.edit_adType == 3){
            getAdMaterialPage({
              page: 1,
              size: 20,
              isMedia: 1,
              name: this.edit_adMaterial
              }).then(res => {
              if(res.code == 405){
                sessionStorage. removeItem('token')
                that.$router.push('/login');
              }else if(res.code == 200){
                that.edit_adMaterialList = []
                console.log(res)
                for(var i=0;i<res.data.length;i++){
                  that.edit_adMaterialList.push({'value':res.data[i].name,'id':res.data[i].id,"url":res.data[i].url,'type':res.data[i].type})
                }
                let servicearr = that.edit_adMaterialList;
                let results = queryString
                  ? servicearr.filter(that.createFilter(queryString))
                  : servicearr;
                // 调用 callback 返回建议列表的数据
                cb(results);
              }else{
                that.$message.error(res.message);
              }
            })
          }else {
            getAdMaterialPage({
              page: 1,
              size: 20,
              isMedia: 0,
              name: this.edit_adMaterial
              }).then(res => {
              if(res.code == 405){
                sessionStorage. removeItem('token')
                that.$router.push('/login');
              }else if(res.code == 200){
                that.edit_adMaterialList = []
                console.log(res)
                for(var i=0;i<res.data.length;i++){
                  that.edit_adMaterialList.push({'value':res.data[i].name,'id':res.data[i].id,"url":res.data[i].url,'type':res.data[i].type})
                }
                let servicearr = that.edit_adMaterialList;
                let results = queryString
                  ? servicearr.filter(that.createFilter(queryString))
                  : servicearr;
                // 调用 callback 返回建议列表的数据
                cb(results);
              }else{
                that.$message.error(res.message);
              }
            })
          }
         
         
        },
        serviceid_scBJ(item){
          this.edit_adMaterialId = item.id
          //素材预览 筛选对应的URL
          for(var i=0;i<this.edit_adMaterialList.length;i++){
            if(item.id == this.edit_adMaterialList[i].id && this.edit_adMaterialList[i].type !== 2){
              this.edit_imgurl = this.edit_adMaterialList[i].url
              this.edit_imgshow = true
            }
          }
        },
        isyesorno(){
          //如果单选框选择否 那么把商户 服务商 都清空
          if(this.edit_whFrom == 0){
            this.edit_from = ''
            this.agentname_edit = ''
            this.agent_editid = ''
            this.merchantname_edit = ''
            this.merchant_editid = ''
          }
        },
        //编辑广告
        edit_ad(v){
          this.visbj = true
          this.edit_id = v
          this.popuptag(v)
          getAdInfoEdit({},v).then(res => {
            if(res.code ==405){
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            }else if (res.code == 200) {
              this.edit_adTitle = res.data.title
              this.edit_adType = res.data.type
              this.edit_adMaterialId = res.data.materialId
              this.edit_adMaterial = res.data.materialName
              this.edit_imgurl = res.data.materialUrl
              this.dynamicTags = res.data.tagList
              // this.edit_adMaterial
              this.edit_adNum = res.data.total
              this.edit_adWeights = res.data.weight
              this.edit_date = [res.data.startTime,res.data.endTime]
              this.edit_adRepeat = 0
              if(res.data.provinceId !== ''&&res.data.provinceId !== null){
                this.edit_area = 2
              }else{
                this.edit_area = 1
              }
              this.citys(res.data.provinceId,3)
              this.edit_province = res.data.provinceId
              this.edit_city = res.data.cityId
              this.edit_pay = res.data.payType.split(",")
              if(res.data.environment == 1){
                this.edit_whFrom = 1
                this.edit_from = 1
                this.agentname_edit = res.data.consumers[0].name
                console.log(this.agentname_edit)
                this.agent_editid = res.data.consumers[0].fid
              }else if(res.data.environment == 2){
                this.edit_whFrom = 1
                this.edit_from = 2
                this.merchantname_edit = res.data.consumers[0].name
                this.merchant_editid = res.data.consumers[0].fid
              }else{
                this.edit_whFrom = 0
                this.edit_from = ''
                this.agentname_edit = ''
                this.agent_editid = ''
                this.merchantname_edit = ''
                this.merchant_editid = ''
              }
            }else if(res.code == 500){
              this.$message.error(res.message);
            }
          })
        },
        //追加总量
        Append(){
          if(this.edit_appendNo !== '' &&  this.edit_appendNo !== ''){
            this.edit_adNum = parseInt(this.edit_adNum) + parseInt(this.edit_appendNo)
            this.edit_appendNo = ''
          }
        },
        //编辑提交
        edit_sub(){
          var fids = ''
          if(this.agent_editid && this.merchant_editid == ''){
            fids = this.agent_editid
          }else if(this.merchant_editid && this.agent_editid == ''){
            fids = this.merchant_editid
          }
          var payType = this.edit_pay.join(',')
          var edit_from = ''
          if(this.edit_whFrom == 0){
            edit_from = 0
            this.edit_from = ''
            this.agentname_edit = ''
            this.agent_editid = ''
            this.merchantname_edit = ''
            this.merchant_editid = ''
          }else{
            edit_from = this.edit_from
          }
          if(this.edit_area == 1){
            this.edit_province = ''
            this.edit_city = ''
          }
          if(this.edit_date == null){
            this.$message.error('投放时间不能为空')
            return false
          }
          console.log(this.edit_province)
          console.log(this.edit_city)
          postAdInfoUpdate({
            title: this.edit_adTitle,
            type: this.edit_adType,
            materialId: this.edit_adMaterialId,
            materialUrl: this.edit_imgurl,
            total: this.edit_adNum,
            weight: this.edit_adWeights,
            startTime: this.edit_date[0],
            endTime: this.edit_date[1],
            provinceId: this.edit_province,
            cityId: this.edit_city,
            payType: payType,
            environment: edit_from,
            tagIds: this.usedTags.join(','),
            fids: fids,
            materialType: this.materialType
          },this.edit_id).then(res => {
            if(res.code ==405){
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            }else if (res.code == 200) {
              this.visbj = false
              this.getAdInfoPage()
              this.$message({
                message: res.message,
                type: "success"
              });
            }else if(res.code == 500){
              this.$message.error(res.message);
            }
          })
        },
        //暂停广告
        pause_ad(v){
          this.$confirm(`是否确定暂停广告？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
          }).then(() => {
              postAdInfoSuspend({},v).then(res => {
                if(res.code == 405){
                  sessionStorage.removeItem('token')
                  this.$router.push('/login');
                }else if(res.code == 200){
                  this.$message({
                    message: res.message,
                    type: 'success'
                  });
                 this.getAdInfoPage()
                }else if(res.code == 500){
                  this.$message.error(res.message);
                }
              })
          }).catch(() => {
              this.$message({
                  type: "info",
                  message: "已取消"
              });
          });
        },
        //删除广告
        delete_ad(v){
          this.$confirm(`是否确定删除广告？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
          }).then(() => {
              postAdInfoDelete({},v).then(res => {
                if(res.code == 405){
                  sessionStorage.removeItem('token')
                  this.$router.push('/login');
                }else if(res.code == 200){
                  this.$message({
                    message: res.message,
                    type: 'success'
                  });
                 this.getAdInfoPage()
                }else if(res.code == 500){
                  this.$message.error(res.message);
                }
              })
          }).catch(() => {
              this.$message({
                  type: "info",
                  message: "已取消"
              });
          });
        },
        //上架广告
        start_ad(v){
          this.$confirm(`是否确定上架广告？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
          }).then(() => {
              postAdInfoStart({},v).then(res => {
                if(res.code == 405){
                  sessionStorage.removeItem('token')
                  this.$router.push('/login');
                }else if(res.code == 200){
                  this.$message({
                    message: res.message,
                    type: 'success'
                  });
                 this.getAdInfoPage()
                }else if(res.code == 500){
                  this.$message.error(res.message);
                }
              })
          }).catch(() => {
              this.$message({
                  type: "info",
                  message: "已取消"
              });
          });
        },
        // 广告类型
        addType(val){
          if(val == 3){
            this.add_whFrom = 1
            this.whfroms = true
          }
        }
    }
}
</script>

<style scoped lang='less'>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 40%;
}
.merchants1{
  width: 80%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 20%;
}
.servicelevel {
  width: 40%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}
.wid80{
  width: 80% !important;
}
.wid100{
  width: 100% !important;
}
.wid1001{
  width: 100% !important;
  margin-bottom: 15px;
}
.wid50{
  width: 50% !important;
}
.upload-demo {
  display: none !important;
}
.excelBtn {
  margin-left: 10px;
}
.BDname{
  width: 40%;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 180px;
  margin-left: 10px;
  vertical-align: bottom;
}
// .el-dialog{
//   // overflow: hidden;
// }
el-dialog{
  height: 200px;
  overflow: auto;
}
.imgurl{
  width: 100%;
  height: 100%;
}
.a_link{
  color: #8BC34A;
}
.pos{
  position: absolute;
  margin-top: 8px;
  margin-left: 10px;
}
.wid50_c{
  width: 50% !important;
  margin-top: 8px;
}
</style>

